import Head from "next/head";
import { useCallback, useEffect, useRef, useState } from "react";
import Layout from "@/common/layout";
import Styles from './index.module.less'
import toast,{ Toaster } from 'react-hot-toast';
import {SystemAxios,ClientAxios} from '@/common/useAxios'
import "react-quill/dist/quill.snow.css";
import { Zanimg } from "@/common/components/Images";
import { Tl_timestamp2 } from "@/utils/tools";
function Home({data}){
    const [currData,setCurrData] = useState(data)
    const ajaxState = useRef(false)
    const add_like = useCallback(()=>{
        if(ajaxState.current){return}
        ajaxState.current = true;
        ClientAxios.post('/home/article_likes',{
            id:currData._id
        }).then(({data:res})=>{
            if(res.code == 1){
                setCurrData(vv=>{
                    return {
                        ...vv,
                        likenum:res.data.likenum
                    }
                })
            }
            toast(res.msg);
            ajaxState.current = false;
        })
    },[])
    return (
        <>
            <Layout title={'详情页'}>
                <div className={Styles.title}>{currData.title}</div>
                <div className={Styles.cont} dangerouslySetInnerHTML={{__html:currData.content}}></div>
                <div className={Styles.bottom_box}>
                    <div className="tx1">
                        作者：{currData.account} 获赞：{currData.likenum}
                        <button onClick={add_like}>
                            点赞
                            <Zanimg classname={'img1'} />
                        </button>
                        &nbsp;&nbsp;创建于：{Tl_timestamp2(data.create_time)}
                    </div>
                </div>
            </Layout>
        </>
    )
}
export async function getServerSideProps(context){
    //context
    const id = context.params.id;
    const {data:res} = await SystemAxios({
        method: 'get',
        url: '/home/article_details',
        params: { id:id},
    })
    if(res.code != 1){
        return {
            redirect:{
                permanent: false,
                destination: '/404'
            }
        }
    }
    return {
        props:{
            data:res.data
        }
    }
}
export default Home